<template>
  <div>
    <!--  面包屑导航区域 :to="{path:'/admin/welcome' 路由跳转 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path:'/welcome'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item>业务管理</el-breadcrumb-item>
      <el-breadcrumb-item>机构列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!--  卡片视图区域  -->
    <el-card class="box-card">
      <!--   搜索与添加及刷新区域 :gutter间距  -->
      <el-row :gutter="20">
        <!--    搜索    -->
        <el-col :span="8">
          <el-input placeholder="请输入机构名称" v-model="queryName" id="queryName">
            <el-button slot="append" @click="selectByName" icon="el-icon-search">搜索</el-button>
          </el-input>
        </el-col>
        <!--   新增按钮    type="primary"蓝色主要 -->
        <el-col :span="6">
          <el-button type="primary" @click="saveDialogVisible = true"  icon="el-icon-folder-add">新增机构</el-button>
          <el-button type="info" icon="el-icon-refresh" @click="refresh()">刷新</el-button>
        </el-col>
      </el-row>
      <!--   机构列表区域   -->
      <div>
        &nbsp;
      </div>
      <!--   机构卡片   -->
      <el-row>
        <el-col :span="5" v-for="(item) in organs" :key="item.id" :offset="1"><div class="grid-content bg-purple">
          <el-card :body-style="{ padding: '0px' }" shadow="hover">
            <img v-show="item.image"  v-bind:src="item.image" class="image" width="300px" height="200px">
            <img v-show="!item.image" v-bind:src="item.image" class="image">
            <div style="padding: 14px;">
              <div>
                <el-link type="primary">{{item.name}}</el-link>
              </div>
              <div class="bottom clearfix">
                <el-button type="primary" icon="el-icon-edit"  circle @click="showEditorgan(item.id)"  size="mini"></el-button>
                <el-button type="danger" icon="el-icon-delete" circle @click="del(item.id)"  size="mini"></el-button>&nbsp;
              </div>
            </div>
          </el-card>
        </div></el-col>
      </el-row>
      <!--  分页插槽    -->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.page"
          :page-sizes="[1, 5, 50, 100]"
          :page-size="queryInfo.size"
          layout="total, sizes, prev, pager, next,jumper"
          :total="total">
      </el-pagination>
    </el-card>
    <!--  添加模态框  -->
    <el-dialog
        title="添加机构信息"
        :visible.sync="saveDialogVisible"
        width="50%"
        @close = "saveDialogClosed">
      <!--   内容主体区域   -->
      <el-form :model="organ" :rules="saveFormRules" ref="saveFormRef" label-width="110px">
          <el-form-item label="名称" prop="name">
            <el-input v-model="organ.name" @input="updateInput($event)"></el-input>
          </el-form-item>
          <el-form-item label="简介" prop="intro">
            <el-input v-model="organ.intro" @input="updateInput($event)"></el-input>
          </el-form-item>
          <big-file
              v-bind:id="'image-upload'"
              v-bind:suffixs="['jpg','jpeg','png']"
              v-bind:text="'上传头像'"
              v-bind:after-upload="afterUpload"></big-file>
          <el-form-item label="预览">
            <el-image
                style="width: 100px; height: 100px"
                :src="url"
                >
            </el-image>
          </el-form-item>
      </el-form>
      <!--  底部按钮区域   -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveorgan">保 存</el-button>
        <el-button @click="saveDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <!--  修改模态框  -->
    <el-dialog
        title="修改机构信息"
        :visible.sync="editDialogVisible"
        width="50%"
        @close = "editDialogClosed">
      <!--   内容主体区域   -->
      <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="110px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="头像" prop="image">
          <el-input v-model="editForm.image"></el-input>
        </el-form-item>
        <el-form-item label="简介" prop="intro">
          <el-input v-model="editForm.intro"></el-input>
        </el-form-item>
        <big-file
            v-bind:id="'image-upload'"
            v-bind:suffixs="['jpg','jpeg','png']"
            v-bind:text="'上传头像'"
            v-bind:after-upload="afterUpload"></big-file>
        <el-form-item label="预览">
          <el-image
              style="width: 100px; height: 100px"
              :src="url"
          >
          </el-image>
        </el-form-item>
      </el-form>
      <!--  底部按钮区域   -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editorgan">保 存</el-button>
        <el-button @click="editDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
/*
* 方法 methods:
*   list()-机构列表查询/刷新
*   handleSizeChange 监听页面条数变化
*   handleCurrentChange 监听页码值变化
*   addDialogClosed 监听添加模态框的关闭事件
*   editDialogClosed 监听修改模态框的关闭事件
*   addorgan 机构添加
*   showEditorgan 修改机构前根据id获取机构对象决定是否展示模态框
*   changedStatus 状态封号
*   del 删除机构
*   openFullScreen() 等待Loading加载
*   refresh() 刷新
*
* 生命周期 mounted:
*   _this.list()-页面初始化时候执行list
*
* 数据 data:function ():
*   organs:[]-一个organ空数组
*   addDialogVisible-控制模态框显示隐藏的布尔值
*   total 总条数
*   queryInfo 请求参数块
*
* */
import BigFile from "../../views/big-file"

export default {
    components:{BigFile},
    name: "Organ",
    data:function (){
      return{
        url:'',
        organ:{},
        organs:[],
        queryInfo:{
          page:1,
          size:5,
        },
        queryName:"",
        total:0,
        saveDialogVisible:false,
        editDialogVisible:false,
        saveFormRules:{
          name:[
            {required:true,message:'请输入机构名称',trigger:'blur'},
            {min:3,max:10,message:'请机构名称在3~10个字符之间',trigger: 'blur'}
          ],
          organId: [
            {required:true,message:'请输入机构Id',trigger:'blur'},
            {min:8,max:8,message:'请输入八位的机构Id',trigger:'blur'}
          ]
        },
        editFormRules:{
          name:[
            {required:true,message:'请输入机构名称',trigger:'blur'},
            {min:3,max:10,message:'请机构名称在3~10个字符之间',trigger: 'blur'}
          ],
          organId: [
            {required:true,message:'请输入机构Id',trigger:'blur'},
            {min:8,max:8,message:'请输入八位的机构Id',trigger:'blur'}
          ]
        },
        editForm:{}
      }
    },
    mounted:function (){
      let _this = this;
      _this.list(1);//组件加载时立刻执行一次查询渲染数据
    },
    methods:{
      afterUpload(resp){
        let _this = this;
        let image = resp.content.path;
        _this.organ.image = image;
        _this.url = image;
      },
      //更新键盘输入input值
      updateInput(e){
        let _this = this;
        _this.$forceUpdate()
      },
      //监听 pagesize当前页条数 改变的事件
      handleSizeChange(newSize){
        console.log(newSize)
        this.$data.queryInfo.size=newSize;
        if(!document.getElementById('queryName')==""){
          this.selectByName();
        }else{
          this.list();//重新获取查询list,达到分页切换页面前进后退
        }
      },
      //监听 页码值 改变的事件
      handleCurrentChange(newPage){
        this.$data.queryInfo.page=newPage;
        if(!document.getElementById('queryName')==""){
          this.selectByName();
        }else{
          this.list();//重新获取查询list,达到分页切换页面前进后退
        }
      },
      // 监听添加模态框的关闭事件
      saveDialogClosed(){
        let _this = this;
        _this.$refs.saveFormRef.resetFields()
      },
      // 监听添加模态框的关闭事件
      editDialogClosed(){
        let _this = this;
        _this.$refs.editFormRef.resetFields()
      },
      // 查询 所有机构
      list(page){
      let _this = this;
        _this.$ajax.post(process.env.VUE_APP_SERVER+'/business/admin/organ/list',{
          page:this.$data.queryInfo.page,
          size:this.$data.queryInfo.size,
        }).then((response)=>{
              console.log("查询机构列表结果:",response);
              let resp = response.data;
              _this.organs = resp.content.list;
              _this.total = resp.content.total;
            })
      },
      saveorgan(page){
        let _this = this;
        _this.$refs.saveFormRef.validate(vaild=>{
          if(!vaild)return //如果验证通过才发起添加用户的网络请求
          _this.$ajax.post(process.env.VUE_APP_SERVER+'/business/admin/organ/save',_this.organ).then((response)=>{
            console.log("保存机构列表结果",response);
            let resp = response.data;
            if (resp.success){
              _this.$data.saveDialogVisible = false;
              _this.$data.editDialogVisible = false;
              _this.list(1);
              _this.$message.success('保存机构信息成功');
            }
          })
        })
      },
      editorgan(page){
        let _this = this;
        _this.$refs.editFormRef.validate(vaild=>{
          if(!vaild)return //如果验证通过才发起添加用户的网络请求
          _this.$ajax.post(process.env.VUE_APP_SERVER+'/business/admin/organ/save',_this.editForm).then((response)=>{
            console.log("修改机构列表结果",response);
            let resp = response.data;
            if (resp.success){
              _this.$data.saveDialogVisible = false;
              _this.$data.editDialogVisible = false;
              _this.list(1);
              _this.$message.success('修改机构信息成功');
            }
          })
        })
      },
      showEditorgan(id){
        console.log("当前行id值",id);
        let _this = this;
        _this.$ajax.get(process.env.VUE_APP_SERVER+'/business/admin/organ/selectId/'+id).then((response)=>{
          let resp = response.data;
          if(response.status !== 200){
            return this.$message.error("查询机构信息失败");
          }
          _this.editForm = resp.content;
          console.log("ID查询机构列表结果:",response);
          _this.editDialogVisible = true;
        })
      },
      changedStatus(organ){
        let _this = this;
        console.log("测试",organ)
        _this.$ajax.post(process.env.VUE_APP_SERVER+'/business/admin/organ/changedStatus',organ).then((response)=>{
          if(response.status !=200){
            return _this.$message.error("修改状态失败")
          }
          _this.$message.success("修改状态成功")
          console.log("改变机构状态结果",response);
            let resp = response.data;
        })
      },
      del(id){
        this.$confirm('此操作将机构永久删除, 是否继续?', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log("删除当前的id",id)
          let _this = this;
          _this.openFullScreen();
          _this.$ajax.delete(process.env.VUE_APP_SERVER+'/business/admin/organ/delete/'+id).then((response)=>{
            console.log("删除机构列表结果:",response);
            let resp = response.data;
            if (resp.success){
              _this.list(1);
              _this.$message.success("删除机构成功")
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
            });
          });
        },
      openFullScreen() {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
        }, 1000);
      },
      selectByName(page,queryName){
        let _this = this;
        _this.openFullScreen();
        console.log("当前搜索的name",_this.$data.queryName)
        _this.$ajax.post(process.env.VUE_APP_SERVER+'/business/admin/organ/selectName',{
            page:this.$data.queryInfo.page,
            size:this.$data.queryInfo.size,
            name:this.$data.queryName,
          }).then((response)=>{
          console.log("模糊查询机构名称结果:",response);
          let resp = response.data;
          _this.organs = resp.content.list;
          _this.total = resp.content.total;
        })
      },
      refresh(){
        this.openFullScreen();
        if(!document.getElementById('queryName')==""){
          this.selectByName();
        }else{
          this.list();//重新获取查询list,达到分页切换页面前进后退
        }
      }
    },
}
</script>

<style lang="less" scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>